<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>swiper</title>
    <link rel="stylesheet" href="../swiper_official/swiper-3.3.1.min.css">
    <style>
        body{
            width:100%;
            overflow: hidden;
        }
        .swiper-container{
            width:300px;
            overflow: visible;

            position: relative;
        }
        .waikuang{
            position: absolute;
            top:0;
            left:0;
            right:0;
            z-index: 2;
            width:100%;
            height:100%;
            overflow: hidden;
            text-align: center;
            line-height: 130px;
        }
        .waikuang img{
            width:100px;
            height:106px;
        }
        .swiper-slide{
            width:100%;
            height:150px;
            background-color: #ccc;
            text-align: center;
            line-height:150px;
        }
        .swiper-slide img{
            width:50px;
            height:50px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="swiper-container swiper-container_h">
        <div class="waikuang">
            <img src="020.png" alt="">
        </div>
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="01.png" alt="">1</div>
            <div class="swiper-slide"><img src="01.png" alt="">2</div>
            <div class="swiper-slide"><img src="01.png" alt="">3</div>
            <div class="swiper-slide"><img src="01.png" alt="">4</div>
            <div class="swiper-slide"><img src="01.png" alt="">5</div>

        </div>
        <!--  分页器-->
        <!--<div class="swiper-pagination">-->
    </div>
    <!-- 导航按钮-->
    <!--<div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>-->
    <!--滚动条-->
    <!-- <div class="swiper-scrollbar"></div>-->

</div>
</div>

<script src="jq.js"></script>
<script src="../swiper_official/swiper-3.3.1.min.js"></script>
<script>
    $(function () {
        var mySwiper = new Swiper('.swiper-container_h', {
            direction: 'horizontal',
            /*direction:'horizontal',*/
            /*loop设置是否在后边添加第一个slide*/
            /*loop:'true',*/
            loop: 'true',
            slidesPerView : 'auto',
            loopedSlides :10,
            /*分页器*/
            pagination: '.swiper-pagination',
            /*前进后退按钮*/
            nextButton:'.swiper-button-next',
             prevButton:'.swiper-button-prev',
            /*滚动条*/
            /*scrollbar: '.swiper-scrollbar',*/
        })
    })
</script>

</body>
</html>